<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // Event Loop即事件循环， 为js是单线程的

      // eventlop 由三部分组成   调用栈 微任务队列 消息队列
      // 同步任务
      // 称为 非耗时任务  交于 JavaScript线程执行
      // 只有前一个完成，后一个才执行
      /* new promise   */

      //
      /*异步任务
又称为耗时任务   交于 寄宿器执行

异步任务分为宏任务和微任务  两者交替执行

宏任务: 又称为消息队列
setTimeout	设定的延时到了后，回调函数会进入宏任务队列
setInterval	类似 setTimeout，但会重复执行
setImmediate（仅 Node.js）	在当前事件循环结束后立即执行（比 setTimeout(0) 更快）
requestAnimationFrame	在下一帧（通常 16.6ms 内）执行，专门用于动画渲染
I/O 操作（如文件读写、网络请求）	例如 fs.readFile、fetch 的 onload  ajax事件等
UI 渲染任务（浏览器）	例如 DOMContentLoaded 事件、页面重绘（Repaint）
MessageChannel	通过 postMessage 发送的消息回调

事件监听器回调：例如通过 addEventListener 添加的事件处理函数。
网络请求：发送 HTTP 请求并等待响应。
用户交互事件：例如点击、滚动等用户行为触发的事件。
文件操作
等

微任务 可以使 宏任务的一个分支 
比如银行 两个人办业务 两个2排队 属于排队
1个人存款后，再去卖理财产品，或者办理信用卡 这些接着的任务称为 微任务 
 后一个人的任务为宏任务

微任务 比红任务先执行
2. promis.then catch finally
process.nextTick
等 

同步任务 -> 微任务 -> 宏任务。
*/
      const p = new Promise((resolve, reject) => {
        console.log(4);
        resolve(5);
      });

      function fn2() {
        setTimeout(() => {
          console.log(2);
        }, 0);
      }

      function fn1() {
        console.log(1);
      }
      fn1();
      console.log(3);
      p.then((res) => {
        console.log(res);
      });
      fn2();

      // output: 4 1 3 5 2

      // console.log("----------------------------------");

      // setTimeout(function () {
      //   console.log(22);
      // }, 0);
      // const pp = new Promise((resolve) => {
      //   resolve(1000);
      // });
      // pp.then((Res) => {
      //   console.log(Res);
      // });

      // console.log(3);
      // // output 1 3  1000 2
    </script>
  </body>
</html>
